import React, { useEffect } from 'react';
import { PageHeader, Form, Input, Typography, Tag, Spin, Button } from 'antd';
import { WingBlank, WhiteSpace } from 'antd-mobile';
import FormItemLabel from './components/FormItemLabel';
import './index.css';
const { Title, Text } = Typography;

import {
    ConnectProps,
    connect,
    UserModelState,
    OrderModelState,
    Loading,
} from 'umi';
interface OrderDetailProps extends ConnectProps {
    user: UserModelState;
    order: OrderModelState;
    location: any;
    history: any;
    loading: boolean;
}

const InputStyle = {
    color: '#666',
    backgroundColor: '#fff',
    border: 'none',
    outline: 'none',
};

const OrderDetail: React.FC<OrderDetailProps> = ({
    user,
    order,
    history,
    dispatch,
    loading,
}) => {
    // form
    const [form] = Form.useForm();
    // State
    // Effect
    useEffect(() => {
        // 获取订单ID,
        if (dispatch) {
            dispatch({
                type: 'order/query',
                payload: {
                    userinfo: {
                        token: user.token,
                        userid: user.userid,
                    },
                    request: {
                        id: order.id,
                    },
                },
            });
        }
    }, []);
    return (
        <>
            {loading && (
                <Spin
                    style={{
                        position: 'fixed',
                        left: '50%',
                        top: '50%',
                        transform: 'translate(-50%, -50%)',
                    }}
                />
            )}

            {!loading && (
                <>
                    <PageHeader
                        onBack={() => {
                            history.push('order_list');
                        }}
                        title="订单详情"
                        subTitle={
                            <Button
                                type="danger"
                                onClick={() => {
                                    history.push(`/order_new`);
                                }}
                                style={{ marginTop: '10px' }}
                            >
                                修改订单
                            </Button>
                        }
                    />
                    <WingBlank size="lg">
                        <WhiteSpace size="lg" />
                        <Form form={form}>
                            <Title level={4} className="blue-text">
                                业主信息
                            </Title>
                            <Form.Item
                                label={
                                    <FormItemLabel
                                        content="维修单位:"
                                        icon="#icon-danwei"
                                    />
                                }
                                className="inline "
                            >
                                <Input
                                    style={InputStyle}
                                    value={order.company}
                                    readOnly
                                />
                            </Form.Item>
                            <Form.Item
                                label={
                                    <FormItemLabel
                                        content="通知维修人:"
                                        icon="#icon-shuidiangong"
                                    />
                                }
                                className="inline"
                            >
                                <Input
                                    style={InputStyle}
                                    value={order.personofrepair}
                                    disabled
                                />
                            </Form.Item>
                            <Form.Item
                                label={
                                    <FormItemLabel
                                        content="联系电话:"
                                        icon="#icon-weibiaoti-"
                                    />
                                }
                                className="inline"
                            >
                                <a href={`tel:${order.phone}`}>{order.phone}</a>
                            </Form.Item>
                            <Form.Item
                                label={
                                    <FormItemLabel
                                        content="通知时间:"
                                        icon="#icon-shijian"
                                    />
                                }
                                className="inline"
                            >
                                <Text>{order.notice_time}</Text>
                            </Form.Item>
                            <Form.Item
                                label={
                                    <FormItemLabel
                                        content="紧急程度:"
                                        icon="#icon-jinjichengdu-"
                                    />
                                }
                                className="inline"
                            >
                                {
                                    <>
                                        {order.crash === 1 && (
                                            <Tag color="processing">一般</Tag>
                                        )}
                                    </>
                                }
                                {
                                    <>
                                        {order.crash === 2 && (
                                            <Tag color="warning">急</Tag>
                                        )}
                                    </>
                                }
                                {
                                    <>
                                        {order.crash === 3 && (
                                            <Tag color="error">加急</Tag>
                                        )}
                                    </>
                                }
                            </Form.Item>
                            <Form.Item
                                label={
                                    <FormItemLabel
                                        content="维修内容:"
                                        icon="#icon-neirong"
                                    />
                                }
                                className="inline"
                            >
                                <Text>{order.content}</Text>
                            </Form.Item>
                            <Form.Item
                                label={
                                    <FormItemLabel
                                        content="要求完成时间:"
                                        icon="#icon-shijian"
                                    />
                                }
                                className="inline border_bottom_line"
                            >
                                <Text>{order.completedTime}</Text>
                            </Form.Item>
                            <Title
                                className="blue-text"
                                level={4}
                                style={{ margin: '20px 0' }}
                            >
                                服务信息
                            </Title>
                            <Form.Item
                                label={
                                    <FormItemLabel
                                        content="维修结果:"
                                        icon="#icon-z-like"
                                    />
                                }
                                className="inline"
                            >
                                <Tag color={order.color}>
                                    {order.status === 2 && '待服务'}
                                    {order.status === 3 && '维修中'}
                                    {order.status === 4 && '已完成'}
                                    {order.status === 5 && '未完成'}
                                </Tag>
                            </Form.Item>
                            <Form.Item
                                label={
                                    <FormItemLabel
                                        content="预定完成时间:"
                                        icon="#icon-shijian"
                                    />
                                }
                                className="inline"
                            >
                                <Text>{order.estimated_finish_time}</Text>
                            </Form.Item>
                            <Form.Item
                                label={
                                    <FormItemLabel
                                        content="服务时间:"
                                        icon="#icon-shijian"
                                    />
                                }
                                className="inline"
                            >
                                <Text>{order.service_time}</Text>
                            </Form.Item>
                            <Form.Item
                                label={
                                    <FormItemLabel
                                        content="未完成原因:"
                                        icon="#icon-shibaiyuanyin"
                                    />
                                }
                                className="inline"
                            >
                                <Text>{order.incompleteReason}</Text>
                            </Form.Item>
                            <Form.Item
                                label={
                                    <FormItemLabel
                                        content="服务完成照片:"
                                        icon="#icon-zhaopian"
                                    />
                                }
                                className="inline"
                            >
                                <div
                                    style={{
                                        width: '100%',
                                        display: 'flex',
                                        flexWrap: 'wrap',
                                    }}
                                >
                                    {order.finishImages.map((item, index) => (
                                        <img
                                            src={item}
                                            alt=""
                                            key={index}
                                            style={{
                                                width: '30%',
                                                marginRight: '2%',
                                                height: '30%',
                                            }}
                                        />
                                    ))}
                                </div>

                                {/* <img src={order.finishImages} alt="服务完成照片" style={{ width: '100%' }} /> */}
                            </Form.Item>

                            <Title
                                className="blue-text"
                                level={4}
                                style={{ margin: '20px 0' }}
                            >
                                评价
                            </Title>
                            <Form.Item
                                label={
                                    <FormItemLabel
                                        content="评分:"
                                        icon="#icon-pingfen"
                                    />
                                }
                                className="inline"
                            >
                                <Text>{order.score}</Text>
                            </Form.Item>
                            <Form.Item
                                label={
                                    <FormItemLabel
                                        content="评价:"
                                        icon="#icon-icon_pingjia"
                                    />
                                }
                                className="inline"
                            >
                                <Text>{order.comment}</Text>
                            </Form.Item>
                        </Form>

                        <WhiteSpace size="lg" />
                    </WingBlank>
                </>
            )}
        </>
    );
};
export default connect(
    ({
        user,
        order,
        loading,
    }: {
        user: UserModelState;
        order: OrderModelState;
        loading: Loading;
    }) => ({
        user,
        order,
        loading: loading.models.order,
    }),
)(OrderDetail);
